<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <div id="name">点我选择</div>

</body>
<script src="js/picker.min.js"></script>
<script>
    var nameEl = document.getElementById('name');

    var data1 = [
        {
            text: '小美',
            value: 1
        }, {
            text: '猪猪',
            value: 2
        }
    ];


    var picker = new Picker({
        data: [data1],
        selectedIndex: [0],
        title: '我们都是小学生'
    });

    picker.on('picker.select', function (selectedVal, selectedIndex) {
        nameEl.value = data1[selectedIndex[0]].text;
    })

    picker.on('picker.change', function (index, selectedIndex) {
        console.log(index);
        console.log(selectedIndex);
    });

    picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
        console.log(selectedVal);
        console.log(selectedIndex);
    });

    nameEl.addEventListener('click', function () {
        picker.show();
    });
</script>

</html>